<template>
  <div class="header">
    <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      @select="handleSelect"
    >
      <el-submenu index="1">
        <template slot="title">欢迎您！{{ this.username }}</template>
        <el-menu-item index="2-3" @click="logout">退出</el-menu-item>
      </el-submenu>
    </el-menu>
    <div class="logo">
      <h2>
        <i class="el-icon-s-home"></i>
        后台管理
      </h2>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: ''
    }
  },
  created() {
    this.get()
  },
  methods: {
    logout() {
      this.$router.push('/login')
      localStorage.removeItem('token')
    },
    // 根据token获得用户名
    async get() {
      const { data: res } = await this.$http.get('/api/login', {
        headers: { Authorization: localStorage.getItem('token') }
      })
      this.username = res.name
    }
  }
}
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
.header {
  height: 60px;
  border-bottom: 1px solid #e6e6e6;
}
.el-menu {
  float: right;
  border-bottom: none;
}
.el-menu-item {
  width: 100px;
}
.logo {
  width: 200px;
  height: 60px;
  padding-left: 25px;
  line-height: 60px;
}
</style>
